<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>未来图书馆</title>
  <link rel="stylesheet" href="./css/subject.css"> <!-- 正常视口 -->
  <link rel="stylesheet" href="./css/subject4.css" media="(min-width:1200px)">
  <link rel="stylesheet" href="./css/subject1.css" media="(max-width:1200px)">
  <link rel="stylesheet" href="./css/subject2.css" media="(max-width:992px)">
  <link rel="stylesheet" href="./css/subject3.css" media="(max-width:768px)">
  <style>
    .icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
    </style>
</head>
<body> 
  <div class="top">
        <!-- 搜索区域 -->
        <div class="box">
          <!-- 引用字体图标 -->
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shuji"></use>
          </svg>
          <!-- 搜索 -->
          <div class="search1">
            <!-- 插入字体图标 -->
            <label for="sr">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-icon-test"></use>
              </svg>
            </label>
            <!-- 输入框 -->
              <input type="search" name="" id="sr" placeholder="关键词书名或作者">  
          </div>
        </div>
        <!-- 爱心收藏 -->
        <div class="collection">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shoucang"></use>
          </svg>
          <span>0</span>
        </div>
        <!-- 覆盖整体 -->
        <div class="cover cover1"></div>
        <!-- 爱心收藏 -->
        <div class="cancel cancel_1">
          <!-- 叉掉 -->
          <div class="box">x</div>
          <!-- 被收藏的书籍 -->
              <ul></ul>
        </div>
        <!-- 用户区域头像信息 -->
        <div class="box1">
          <a href="index.html">首页</a>
          <svg class="icon" aria-hidden="true" style="margin-left:10px;">
            <use xlink:href="#icon-yonghu"></use>
          </svg>
          <a href="loginPage.html">登录</a>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-lingdang"></use>
          </svg>
        </div>
  </div>
  <main>
    <svg class="icon" aria-hidden="true" id="drop">
      <use xlink:href="#icon-liebiao2
      "></use>
    </svg>
    <!--往下拉会出现搜索框 -->
        <!-- 中间最左部分 -->
        <div class="left active1">
          <!-- 图书分类 -->
            <div class="classifiCation">
              <h2>图书分类</h2>
              <ul>
                <li><a href="#">全部</a></li>
                <li><a href="#">生活</a></li>
                <li><a href="#">教育</a></li>
                <li><a href="#">历史</a></li>
                <li><a href="#">科技</a></li>
                <li><a href="#">文学</a></li>
                <li><a href="#">财经</a></li>
                <li><a href="#">计算机</a></li>
                <li><a href="#">娱乐</a></li>
                <li><a href="#">小说</a></li>
              </ul>
              <img src="./imgas/1.jpg" alt="">
            </div>
        </div>
        <!-- 中间最右部分 -->
        <div class="right">
          <div class="box">
            <span><a href="#" class="active">全部</a></span>
            <span><a href="#">最新</a></span>
            <span><a href="#">最热</a></span>
            <span><a href="#">推荐</a></span>
          </div>
          <!-- 显示书籍部分 -->
              <ul></ul> 
        </div>
  </main>
      <script src="./lib/font_t/iconfont.js"></script>
      <script src="./js/subject.js"></script>
</body>
</html>